<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"></meta>
<script type="text/javascript" src="/js/vue.js"></script>
<title>Vue.js</title>
</head>
<body>
	<h1>Hello World</h1>
	<hr></hr>
	<div id="app">
		<zhangfeng></zhangfeng>
	</div>
	
	<script type="text/javascript">
		var city = {
				template:`<div style="color:blue;">sichuan of China</div>`
				
		}
	
		var zhangfeng = {
				template:`
					<div style="color:red;">
					<p>zhangfeng from China</p>
					<city></city>
					</div>
				`,
				components:{
					"city":city
				} 
		}
		
		var app = new Vue({
			el:'#app',
			components:{
				"zhangfeng":zhangfeng
			}
		});
	
	</script>
</body>
</html>